<template>
  <view class="page">
    <view class="page-hd">
      <view class="input-area cover-up-input">
        <up-input
          placeholder="请输入串号1"
          border="none"
          v-model="data.number"
          @change="change"
        ></up-input>
      </view>
      <view class="button-area">
        <view
          :class="['ui-button button-style--primary button-size--large']"
          @tap="handleScan"
          >确定添加</view
        >
      </view>
    </view>
    <view class="page-bd">
      <ListView :data="data" type="custom">
        <CardView>
          <template #hd> <view class="card-title">当前串号</view> </template>
          <template #bd>
            <ListItemView
              type="textDeleted"
              v-for="item in data.list"
              :key="item.value"
              :data="item"
              @onDeleted="handleDeleted(item)"
            ></ListItemView>
          </template>
        </CardView>
      </ListView>
    </view>
    <view class="page-ft">
      <view class="info">
        <text class="text">共4条</text>
      </view>
      <view class="buttons-wrap">
        <view class="ui-button button-function--active" @click="handleSubmit"
          >扫串号</view
        >
        <view class="ui-button button-style--primary" @click="handleSubmit"
          >完成</view
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import ListView from '@/components/base-components/list-view/list-view.vue';
import CardView from '@/components/base-components/card-view/card-view.vue';
import ListItemView from '@/components/base-components/list-item-view/list-item-view.vue';

const data = reactive({
  list: [
  {
    text: '1234567890',
    value: '1234567890'
  },{
    text: '2',
    value: '1234567890'
  },{
    text: '3',
    value: '1234567890'
  },]
});

const handleDeleted = (data)=>{
  console.log('删除', data);

}
</script>
<style scoped lang="scss">
@import "@/static/scss/theme.scss";


.page {
  height: 100vh;
  background-color: #F4F8FB;
  // padding: 16rpx 24rpx;
  display: flex;
  flex-direction: column;

  &-hd {
    background-color: #fff;
    padding: 24rpx 32rpx;
    .input-area {
      margin-bottom: 24rpx;
      // padding: 20rpx 24rpx;
      // background-color: $bg-color;
    }
  }
  &-bd {
    flex: 1;
  }

  &-ft {
    display: flex;
    height: 150rpx;
    padding: 20rpx 24rpx;
    justify-content: space-between;
    border-top: 1rpx solid $border-color;

    .info {

      color: $text-l3-color;
      font-size: 28rpx;
    }

    .buttons-wrap {
      display: flex;
      gap: 20rpx;
      height: 80rpx;
    }
  }
  .card-title {
    font-size: 30rpx;
    font-weight: 500;
    line-height: 42rpx;
  }
}
</style>
